<template>
  <div class="add-contacts-dialog">

    <el-dialog
      v-model="dialogVisible"
      title="新建联系人"
      width="500px"
      :before-close="handleClose"
    >

      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="联系人姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="联系电话" prop="iphone">
          <el-input v-model="formData.iphone" placeholder="请输入联系电话" />
        </el-form-item>

        <el-form-item label="职位" prop="position">
          <el-input v-model="formData.position" placeholder="请输入职位" />
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSave">保存并新建</el-button>
          <el-button type="primary" @click="dialogConfirm">保存</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'

export default defineComponent({
  name: 'AddContactsDialog',
  setup(props, { emit }) {
    var ruleForm = ref(null)
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入联系电话'))
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }

    const rules = ref({
      name: [
        {
          required: true,
          message: '请输入姓名',
          trigger: 'blur',
        },
      ],
      iphone: [
        {
          required: true,
          validator: checkPhone,
          trigger: 'blur',
        },
      ],
      position: [
        {
          required: true,
          message: '请输入职位',
          trigger: 'blur',
        },
      ]
    })
    var dialogVisible = ref(false)
    var formData = ref({
      name: '',
      iphone: '',
      position: ''
    })

    const dialogConfirm = () => {
      ruleForm.value.validate((val) => {
        if (val) {
          emit('confirm', { ...formData })
          dialogVisible.value = false
          ruleForm.value.resetFields()
          ruleForm.value.clearValidate()
        }
      })
    }

    const handleClose = () => {
      dialogVisible.value = false
    }

    const onSave = () => {
      ruleForm.value.validate((val) => {
        if (val) {
          emit('confirm', { ...formData })

          ruleForm.value.resetFields()
          ruleForm.value.clearValidate()
        }
      })
    }

    const openDialog = () => {
      dialogVisible.value = true
    }

    return {
      rules,
      dialogVisible,
      ruleForm,
      formData,

      dialogConfirm,
      handleClose,
      onSave,
      openDialog,
    }
  }
})
</script>

<style scoped>

</style>
